/* EX_HYBRID_TEL_20260727: 하이브리드 전화번호 UI (국가선택 iti + 3필드) */
/* EX_HYBRID_TEL_FIX3_20260727: 우선순위 강화 (!important) — 폭축소·1줄·placeholder제거·모바일검색 */
/* EX_TEL_FINAL_FIX_20260727: (1) 모바일 국가리스트 z-index/위치, (2) 3필드 폭 1.5배·간격 확대, (3) recruit 겹침 해소 */

/* iti 플래그 스프라이트 (vendor 하위 img 경로) */
.iti__flag { background-image: url('img/flags.png'); }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag { background-image: url('img/flags@2x.png'); }
}

/* 하이브리드 컨테이너: 항상 1줄, 콤팩트 폭 */
/* EX_TEL_FINAL_FIX_20260727: max-width 340→480 (필드 1.5배 반영), gap 4→6, align 명시 */
#section-recruit table.form-table td.phone-row .hybrid-tel-wrap,
#section-inquiry table.form-table td.phone-row .hybrid-tel-wrap {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  max-width: 480px;
  white-space: nowrap;
  overflow: visible;
}

/* iti 컨테이너: 콤팩트 폭 */
/* EX_TEL_FINAL_FIX_20260727: recruit 스코프에서 iti margin-right로 첫 필드와 여백 확실히 */
#section-recruit table.form-table td.phone-row .hybrid-tel-wrap .iti,
#section-inquiry table.form-table td.phone-row .hybrid-tel-wrap .iti {
  display: inline-flex;
  align-items: stretch;
  height: 4rem;
  flex: 0 0 auto;
  min-width: 80px;
  vertical-align: middle;
  margin-right: 4px !important;
}

.iti--separate-dial-code .iti__selected-flag {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0 6px 0 8px;
}
.iti--separate-dial-code .iti__selected-flag:hover,
.iti--separate-dial-code .iti__selected-flag:focus { background-color: #eee; }

/* iti의 텍스트 input(더미) 숨김 */
#section-recruit table.form-table td.phone-row .hybrid-tel-wrap .iti input.tel-country-ui,
#section-inquiry table.form-table td.phone-row .hybrid-tel-wrap .iti input.tel-country-ui {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  opacity: 0;
  pointer-events: none;
  height: 100%;
  box-sizing: border-box;
}

/* 3필드 공통 스타일 */
#section-recruit table.form-table td.phone-row .hybrid-tel-wrap .tel-part,
#section-inquiry table.form-table td.phone-row .hybrid-tel-wrap .tel-part {
  height: 4rem;
  padding: 0 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
  font-size: 1.4rem;
}
/* 3필드 폭 — EX_TEL_FINAL_FIX_20260727: 55px → 82px (1.5배 확대) */
#section-recruit table.form-table td.phone-row .hybrid-tel-wrap .tel-part-first,
#section-recruit table.form-table td.phone-row .hybrid-tel-wrap .tel-part-mid,
#section-recruit table.form-table td.phone-row .hybrid-tel-wrap .tel-part-end,
#section-inquiry table.form-table td.phone-row .hybrid-tel-wrap .tel-part-first,
#section-inquiry table.form-table td.phone-row .hybrid-tel-wrap .tel-part-mid,
#section-inquiry table.form-table td.phone-row .hybrid-tel-wrap .tel-part-end {
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  flex: 0 0 82px !important;
  text-align: center;
}
#section-recruit table.form-table td.phone-row .hybrid-tel-wrap .tel-part-select,
#section-inquiry table.form-table td.phone-row .hybrid-tel-wrap .tel-part-select { min-width: 60px; }
#section-recruit table.form-table td.phone-row .hybrid-tel-wrap .tel-sep,
#section-inquiry table.form-table td.phone-row .hybrid-tel-wrap .tel-sep {
  color: #999;
  font-weight: bold;
  user-select: none;
  flex: 0 0 auto;
}

/* 국가 드롭다운 검색 wrap (커스텀 주입)
   EX_TEL_FINAL_FIX_20260727: dropdownContainer=body 옵션 대응 — 셀렉터를 .iti__country-list 단독으로도 매칭 */
.iti__country-list { position: relative; }
.iti__country-list > .iti__search-input-wrap {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: #fff !important;
  padding: 6px 8px !important;
  border-bottom: 1px solid #eee !important;
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
}
.hybrid-tel-wrap .iti > .iti__search-input-wrap { display: none !important; }

/* 검색 input — 강한 우선순위 (contents.css의 input[type=text] 규칙보다 강화) */
/* EX_TEL_FINAL_FIX_20260727: 셀렉터 body 하위 리스트도 매칭 */
#wrap #section-recruit table.form-table td.phone-row .iti .iti__country-list input.iti__search-input,
#wrap #section-inquiry table.form-table td.phone-row .iti .iti__country-list input.iti__search-input,
.hybrid-tel-wrap .iti .iti__country-list .iti__search-input,
.iti__country-list .iti__search-input,
input.iti__search-input {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  -webkit-user-select: text !important;
  user-select: text !important;
  width: 100% !important;
  height: 36px !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 6px 10px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  box-sizing: border-box !important;
  outline: none !important;
  background: #fff !important;
  color: #333 !important;
  margin: 0 !important;
}
#wrap #section-recruit table.form-table td.phone-row .iti .iti__country-list input.iti__search-input:focus,
#wrap #section-inquiry table.form-table td.phone-row .iti .iti__country-list input.iti__search-input:focus,
.hybrid-tel-wrap .iti .iti__country-list .iti__search-input:focus,
.iti__country-list .iti__search-input:focus,
input.iti__search-input:focus { border-color: #4a90e2 !important; }

/* 태블릿 — EX_TEL_FINAL_FIX_20260727: max-width 320→460, gap 3→5 */
@media (max-width: 1024px){
  #section-recruit table.form-table td.phone-row .hybrid-tel-wrap,
  #section-inquiry table.form-table td.phone-row .hybrid-tel-wrap {
    max-width: 460px;
    gap: 5px !important;
  }
}

/* 모바일 — EX_TEL_FINAL_FIX_20260727: gap 3→6, 3필드 폭 50→75(1.5배), iti 높이 4→4.4rem, 국가리스트 z-index 9999→999999, top 8→12vh (헤더 아래) */
@media (max-width: 767px){
  #section-recruit table.form-table td.phone-row .hybrid-tel-wrap,
  #section-inquiry table.form-table td.phone-row .hybrid-tel-wrap {
    gap: 6px !important;
    max-width: 100%;
    align-items: center !important;
  }
  #section-recruit table.form-table td.phone-row .hybrid-tel-wrap .tel-part-first,
  #section-recruit table.form-table td.phone-row .hybrid-tel-wrap .tel-part-mid,
  #section-recruit table.form-table td.phone-row .hybrid-tel-wrap .tel-part-end,
  #section-inquiry table.form-table td.phone-row .hybrid-tel-wrap .tel-part-first,
  #section-inquiry table.form-table td.phone-row .hybrid-tel-wrap .tel-part-mid,
  #section-inquiry table.form-table td.phone-row .hybrid-tel-wrap .tel-part-end {
    width: 75px !important;
    min-width: 75px !important;
    max-width: 75px !important;
    flex: 0 0 75px !important;
    height: 4.4rem !important;
    padding: 0 6px !important;
    font-size: 1.4rem !important;
  }
  #section-recruit table.form-table td.phone-row .hybrid-tel-wrap .iti,
  #section-inquiry table.form-table td.phone-row .hybrid-tel-wrap .iti {
    height: 4.4rem !important;
    min-width: 78px;
    margin-right: 4px !important;
  }
  .iti--separate-dial-code .iti__selected-flag { padding: 0 4px 0 6px; }

  /* 국가 드롭다운 = 화면 오버레이 (EX_TEL_FINAL_FIX_20260727)
     — .hybrid-tel-wrap .iti .iti__country-list (기본) + .iti__country-list (dropdownContainer=body 시) 둘 다 매칭 */
  .hybrid-tel-wrap .iti .iti__country-list,
  .iti__country-list {
    position: fixed !important;
    top: 12vh !important;
    left: 5vw !important;
    right: 5vw !important;
    bottom: auto !important;
    width: 90vw !important;
    max-width: 90vw !important;
    max-height: 70vh !important;
    z-index: 999999 !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.25);
    border-radius: 8px;
    overflow-y: auto;
    background: #fff !important;
  }
  #wrap #section-recruit table.form-table td.phone-row .iti .iti__country-list input.iti__search-input,
  #wrap #section-inquiry table.form-table td.phone-row .iti .iti__country-list input.iti__search-input,
  .hybrid-tel-wrap .iti .iti__country-list .iti__search-input,
  .iti__country-list .iti__search-input,
  input.iti__search-input {
    font-size: 16px !important;
    height: 40px !important;
    padding: 8px 12px !important;
  }
  .hybrid-tel-wrap .iti .iti__country-list > .iti__search-input-wrap,
  .iti__country-list > .iti__search-input-wrap {
    padding: 8px 10px !important;
  }
}

/* EX_TEL_FINAL_FIX_20260727: (3) 상시채용쪽 국가+첫 필드 겹침 방지 안전망
   — recruit이 inquiry와 마크업은 동일하나 브라우저 렌더링에서 겹치는 이슈 대응 */
#section-recruit table.form-table td.phone-row .hybrid-tel-wrap {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
}
#section-recruit table.form-table td.phone-row .hybrid-tel-wrap .iti {
  margin-right: 6px !important;
}
#section-recruit table.form-table td.phone-row .hybrid-tel-wrap .tel-part-first {
  margin-left: 2px !important;
}
/* /EX_TEL_FINAL_FIX_20260727 */

/* EX_TEL_320_FIX_20260728 START : 320px 이하 뷰포트에서 3필드 하드코딩 폭(75px)+gap+iti(78+)이 부모 폭(~265px) 초과해 클리핑됨. flex 기반 자동 축소로 전환. */
@media (max-width: 480px){
  #section-recruit table.form-table td.phone-row .hybrid-tel-wrap,
  #section-inquiry table.form-table td.phone-row .hybrid-tel-wrap {
    max-width: 100% !important;
    gap: 3px !important;
  }
  #section-recruit table.form-table td.phone-row .hybrid-tel-wrap .tel-part-first,
  #section-recruit table.form-table td.phone-row .hybrid-tel-wrap .tel-part-mid,
  #section-recruit table.form-table td.phone-row .hybrid-tel-wrap .tel-part-end,
  #section-inquiry table.form-table td.phone-row .hybrid-tel-wrap .tel-part-first,
  #section-inquiry table.form-table td.phone-row .hybrid-tel-wrap .tel-part-mid,
  #section-inquiry table.form-table td.phone-row .hybrid-tel-wrap .tel-part-end {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 0 !important;
    padding: 0 3px !important;
    font-size: 1.3rem !important;
  }
  #section-recruit table.form-table td.phone-row .hybrid-tel-wrap .iti,
  #section-inquiry table.form-table td.phone-row .hybrid-tel-wrap .iti {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin-right: 2px !important;
  }
  #section-recruit table.form-table td.phone-row .hybrid-tel-wrap .tel-sep,
  #section-inquiry table.form-table td.phone-row .hybrid-tel-wrap .tel-sep {
    padding: 0 1px !important;
    font-size: 1.2rem !important;
  }
  .iti--separate-dial-code .iti__selected-flag { padding: 0 3px 0 4px !important; }
}
/* EX_TEL_320_FIX_20260728 END */